import Check from '@/assets/images/shared/icon-check.svg';
import cn from 'classnames';
import Image from 'next/image';

import { ColouredInfoBlock } from '../ColouredInfoBlock';
import cs from './Recepies.module.scss';

export const Recepies = () => (
  <ColouredInfoBlock className={cs.block} reverseResponsive>
    <h2 className="h2">Рецепты</h2>
    <p className={cn('p-reversed', cs.descr)}>
      Готовьте вкусную <span className="hide-less-xs">и&nbsp;гипоаллергенную </span>еду по&nbsp;простым рецептам
    </p>
    <div className={cs.flex}>
      <div className={cs.circle}>
        <span>10 мин</span>
        <div className={cs.circleSmall}>
          <Image alt="check" height={12} src={Check} width={14} />
        </div>
      </div>
      <div className={cs.wave} />
      <div className={cs.images}>
        <div className={cs.image} />
        <div className={cs.image} />
      </div>
    </div>
  </ColouredInfoBlock>
);
